<template>
	<!-- 购物导航 -->
	<view class="goods_bar">
		<!-- 店铺 -->
		<view class="goods_store">
			<u-icon name="server-man" color="#f50000" size="25"></u-icon>
			<text>店铺</text>
		</view>
		<!-- 购物车 -->
		<view class="goods_list" @click="gotoGoods_detail">
			<u-icon name="shopping-cart" color="gray" size="25"></u-icon>
			<text>购物车</text>
			
			<view class="icon_num" v-show="goods_total > 0">
				{{goods_total}}
			</view>
		</view>
		<!-- 加入购物车 -->
		<view class="goods_buy">
			<view class="join" @click="goods_join">加入购物车</view>
			<view class="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	export default {
		computed: {
			...mapGetters('m_cart', ['total'])
		},
		name:"goods_bar",
		data() {
			return {
				goods_total: 0
			};
		},
		methods: {
			goods_join(){
				// this.goods_total++
				this.$emit('m_click')
			},
			gotoGoods_detail(){
				this.$store.commit("m_tabbar/setValue", 2);
				uni.switchTab({
					url: '/pages/shoping/shoping'
				})
			}
		},
		watch: {
			total: {
				handler(newVal){
					this.goods_total = newVal
					console.log('goods_bar', newVal);
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.goods_bar{
		border-top: 1px solid #dcdcdc;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
		height: 60px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.goods_store,.goods_list{
			width: 15%;
			color: gray;
			height: 40px;
			font-size: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;
			text{
				width: 50px;
				text-align: center;
				display: block;
			}
			.icon_num{
				width: 30rpx;
				height: 30rpx;
				background-color: #ff0004;
				border-radius: 50%;
				position: absolute;
				right: 10rpx;
				top: -10rpx;
				color: #ffffff;
				text-align: center;
				line-height: 30rpx;
			}
		}
		.goods_buy{
			width: 60%;
			height: 100%;
			font-size: 0;
			text-align: center;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			view{
				font-size: 16px;
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				background-color: aliceblue;
				color: #ffffff;
			}
			.join{
				border-radius: 30px 0 0 30px;
				background-color: #ffb802;
			}
			.buy{
				border-radius: 0 30px 30px 0;
				background-color: #ff5500;
			}
		}
	}
</style>